<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>平铺数据生成树状结构</title>
</head>
<style>
    #output-container {
        width: 600px;
    }
</style>
<body>
<div id="output-container"></div>
<script>
    module = {};
</script>
<script type="text/javascript" src="./convert-to-tree.js"></script>
<script>
    const convertToTreeFn = module.exports;
    const output = document.getElementById("output-container");
    const regions = [
        {
            id: "51",
            name: "四川省",
            pid: "0",
        },
        {
            id: "5101",
            name: "成都市",
            pid: "51",
        },
        {
            id: "5103",
            name: "自贡市",
            pid: "51",
        },
        {
            id: "5104",
            name: "攀枝花市",
            pid: "51",
        },
        {
            id: "5105",
            name: "泸州市",
            pid: "51",
        },

        {
            id: "5107",
            name: "绵阳市",
            pid: "51",
        },
        {
            id: "510101",
            name: "市辖区",
            pid: "5101",
        },
        {
            id: "510104",
            name: "锦江区",
            pid: "5101",
        },
        {
            id: "510105",
            name: "青羊区",
            pid: "5101",
        },
        {
            id: "510106",
            name: "金牛区",
            pid: "5101",
        },
        {
            id: "510107",
            name: "武侯区",
            pid: "5101",
        },
        {
            id: "510108",
            name: "成华区",
            pid: "5101",
        },
        {
            id: "510112",
            name: "龙泉驿区",
            pid: "5101",
        },
        {
            id: "510113",
            name: "青白江区",
            pid: "5101",
        },
        {
            id: "510114",
            name: "新都区",
            pid: "5101",
        },
        {
            id: "510115",
            name: "温江区",
            pid: "5101",
        },
        {
            id: "510116",
            name: "双流区",
            pid: "5101",
        },
        {
            id: "510117",
            name: "郫都区",
            pid: "5101",
        },
        {
            id: "510118",
            name: "新津区",
            pid: "5101",
        },
        {
            id: "510121",
            name: "金堂县",
            pid: "5101",
        },
        {
            id: "510129",
            name: "大邑县",
            pid: "5101",
        },
        {
            id: "510131",
            name: "蒲江县",
            pid: "5101",
        },
        {
            id: "510181",
            name: "都江堰市",
            pid: "5101",
        },
        {
            id: "510182",
            name: "彭州市",
            pid: "5101",
        },
        {
            id: "510183",
            name: "邛崃市",
            pid: "5101",
        },
        {
            id: "510184",
            name: "崇州市",
            pid: "5101",
        },
        {
            id: "510185",
            name: "简阳市",
            pid: "5101",
        },
        {
            id: "510301",
            name: "市辖区",
            pid: "5103",
        },
        {
            id: "510302",
            name: "自流井区",
            pid: "5103",
        },
        {
            id: "510303",
            name: "贡井区",
            pid: "5103",
        },
        {
            id: "510304",
            name: "大安区",
            pid: "5103",
        },
        {
            id: "510311",
            name: "沿滩区",
            pid: "5103",
        },
        {
            id: "510321",
            name: "荣县",
            pid: "5103",
        },
        {
            id: "510322",
            name: "富顺县",
            pid: "5103",
        },
        {
            id: "510401",
            name: "市辖区",
            pid: "5104",
        },
        {
            id: "510402",
            name: "东区",
            pid: "5104",
        },
        {
            id: "510403",
            name: "西区",
            pid: "5104",
        },
        {
            id: "510411",
            name: "仁和区",
            pid: "5104",
        },
        {
            id: "510421",
            name: "米易县",
            pid: "5104",
        },
        {
            id: "510422",
            name: "盐边县",
            pid: "5104",
        },
        {
            id: "510501",
            name: "市辖区",
            pid: "5105",
        },
        {
            id: "510502",
            name: "江阳区",
            pid: "5105",
        },
        {
            id: "510503",
            name: "纳溪区",
            pid: "5105",
        },
        {
            id: "510504",
            name: "龙马潭区",
            pid: "5105",
        },
        {
            id: "510521",
            name: "泸县",
            pid: "5105",
        },
        {
            id: "510522",
            name: "合江县",
            pid: "5105",
        },
        {
            id: "510524",
            name: "叙永县",
            pid: "5105",
        },
        {
            id: "510525",
            name: "古蔺县",
            pid: "5105",
        },
        {
            id: "510701",
            name: "市辖区",
            pid: "5107",
        },
        {
            id: "510703",
            name: "涪城区",
            pid: "5107",
        },
        {
            id: "510704",
            name: "游仙区",
            pid: "5107",
        },
        {
            id: "510705",
            name: "安州区",
            pid: "5107",
        },
        {
            id: "510722",
            name: "三台县",
            pid: "5107",
        },
        {
            id: "510723",
            name: "盐亭县",
            pid: "5107",
        },
        {
            id: "510725",
            name: "梓潼县",
            pid: "5107",
        },
        {
            id: "510726",
            name: "北川羌族自治县",
            pid: "5107",
        },
        {
            id: "510727",
            name: "平武县",
            pid: "5107",
        },
        {
            id: "510781",
            name: "江油市",
            pid: "5107",
        },
    ];
    const result = convertToTreeFn(regions);
    // console.log(regions);
    // console.log(result[0]);

    output.appendChild(getRegionDoms(result));

    function getRegionDoms(regions) {
        if (!regions || regions.length === 0) {
            return;
        }

        const ul = document.createElement("ul");
        regions.forEach((region) => {
            const li = document.createElement("li");
            const textNode = document.createTextNode(region.name);
            li.appendChild(textNode);
            const children = getRegionDoms(region.children);
            if (children) {
                li.appendChild(children);
            }
            ul.appendChild(li);
        });
        return ul;
    }
</script>
</body>
</html>
